<template>
  <div class="employees-container">
    <div class="app-container">
      <!-- 员工详情组件 -->
      <el-card>
        <el-form :model="form" ref="form" label-width="120px" :rules="rules" style="margin-left: 120px; margin-top:30px">
          <el-form-item label="姓名" prop="username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="form.mobile" disabled></el-input>
          </el-form-item>
          <el-form-item label="入职时间">
            <el-date-picker v-model="form.timeOfEntry" type="date">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="员工头像">
            <!-- 全局组件 上传图片
            问题 上传好的图片URL在upload-img组件内存着呢
            而提交给后端的userInfo并没有
            怎末解决：url放到userInfo里面才可以
            子传父
            -->
            <upload-img @get-url="getUrl" :url="form.staffPhoto"/>
          </el-form-item>
          <!-- 保存个人信息 -->
          <el-row class="inline-info" type="flex" justify="center">
            <el-col :span="12">
              <el-button type="primary" @click="confirm">保存更新</el-button>
              <el-button @click="$router.back()">返回</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getUserDetaliById } from '@/api/user'
import {saveUserDetailById} from '@/api/employees'
// UploadImg已经注册为全局组件了
// import UploadImg from '@/components/UploadImg'
export default {
  // components:{
  //   UploadImg
  // },
  data() {
    return {
      form: {
        uasename: "", //用户名
        // mobile: "", //手机
        // timeOfEntry: "", //入职时间
        // staffPhoto: "", //员工头像
      },
      rules:{
        username:[{required: true, message: '姓名不能为空', trigger: 'blur'}]
      }
    };
  },
  mounted() {
    this.fetchUserInfoById()
  },
  methods: {
    // 获取员工详情
    async fetchUserInfoById() {
      // 获取id
      // path+ query获取参数的方式 this.$route.query.id
      const id = this.$route.query.id
      const res = await getUserDetaliById(id)
      console.log(res);
      this.form = res
    },
    // 保存更新
    async confirm() {
      this.$refs.form.validate(async valid => {
        // 掉员工信息保存接口  
        // 使用最新修改数据覆盖源数据 作为接口提交数据
        await saveUserDetailById(this.form)
        // 重新获取数据 更新页面
        this.fetchUserInfoById()
        // 提示用户
        this.$message.success('更新成功')
      })
   
    },
    getUrl(url) {
      // 获取图片地址
      console.log(url);
      // // 图片上传完毕之后 用于提交给后端的字段里就有了有效的url
      this.form.staffPhoto = url
    }
  }
};
</script>

<style>
</style>